<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        #demo1 {
            width: 100px;
            height: 100px;
        }

        body {
            background-color: #ffffff;
        }

        .tishi {
            color: red;
        }

        .tishi1 {
            color: red;
        }

        .tishi2 {
            color: red;
        }
    </style>
</head>
<body>
<form>
    <div class="layui-form-item">
        <label class="layui-form-label required">一级名称</label>
        <div class="layui-input-block">
            <select style="width: 180px;height: 30px;" class="ipt" id="roleId">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">父级名称</label>
        <div class="layui-input-block">
            <select style="width: 180px;height: 30px;" class="ipt" id="roleIds">
                <option>无</option>
            </select><span class="tishi"></span>
        </div>
    </div>
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" lay-reqtext="商品名称不能为空"
                       placeholder="请输入商品名称" autocomplete="off" class="layui-input" id="yhm"><span
                    class="tishi1"></span>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" required>商品介绍</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" type="text" lay-verify="required"
                          lay-reqtext="商品介绍不能为空" id="mm" name="password"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">商品价格</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="请输入商品价格"
                       value="" class="layui-input" id="yx"><span class="tishi2"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">库存数量</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required" lay-reqtext="库存数量不能为空" placeholder="请输入库存数量"
                       value="" class="layui-input" id="sjh"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品主图</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img onclick="showimg(this)" class="layui-upload-imgs" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
        <%--    隱藏表单 存储上传成功后 回调返回的文件名--%>
        <input type="hidden" name="photo" id="photo"><br>
        <div class="layui-upload">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <button type="button" class="layui-btn" id="upload_2"><i class="layui-icon">&#xe64a;</i>轮播图上传</button>
                <button type="button" class="layui-btn layui-btn-danger cover" id="control_img_del"
                        style="display: inline"><i class="layui-icon">&#xe640;</i>删除图片
                </button>
                <input type="hidden" id="control_img" value="{$detail.control_video}" name="control_video"/>
                <input type="hidden" id="temp_url_idimg" value="" name="temp_url_idimg"/>
            </blockquote>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="upload_listss"></div>
                <input type="hidden" name="images_str" id="picText_2" class="upload_image_url" value="">
            </blockquote>
        </div>
        <div class="layui-upload">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <button type="button" class="layui-btn" id="upload_1"><i class="layui-icon">&#xe64a;</i>预览图上传</button>
                <button type="button" class="layui-btn layui-btn-danger cover" id="control_img_dels"
                        style="display: inline"><i class="layui-icon">&#xe640;</i>删除图片
                </button>
                <input type="hidden" id="control_imgs" value="{$detail.control_video}" name="control_video"/>
                <input type="hidden" id="temp_url_idimgs" value="" name="temp_url_idimg"/>
            </blockquote>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="upload_lists"></div>
                <input type="hidden" name="images_strs" id="picText_1" class="upload_image_url" value="">
            </blockquote>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</form>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'upload', 'table', 'element', 'layer'], function () {
        var form = layui.form
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        $.ajax({
            "url": "spcx?opr=leix",
            "type": 'post',
            "data": {},
            async: false,   //如果不加，无法实现数据传值
            "dataType": 'json',
            "success": function (datajson) {
                var select = $("#cRoleName");
                $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                    var roleName = datajson[key].etype;
                    //调用自定义方法
                    AppendNode(roleName, roleName);//将value和text添加到下拉框中
                });
            },
            error: function () {
                alert("出现错误");
            }
        })

        function AppendNode(values, texts) {
            $("#roleId").append("<option  value='" + values + "'  name='rr' id='rr'>" + texts + "</option>");
        }

        $("#roleIds").find("option").remove();
        var myselect = document.getElementById("roleId");
        var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
        myselect.options[index].value;
        let rr = myselect.options[index].text;
        $.ajax({
            "url": "spcx?opr=spleix&rr=" + rr,
            "type": 'post',
            "data": {},
            async: false,   //如果不加，无法实现数据传值
            "dataType": 'json',
            "success": function (datajson) {
                var select = $("#cRoleName");
                if (datajson == null || datajson == "") {
                    $("#roleIds").append("<option name='ss' id='ss'>无</option>");
                } else {
                    $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                        var roleNames = datajson[key].etype;
                        //调用自定义方法
                        AppendNodes(roleNames, roleNames);//将value和text添加到下拉框中
                    });
                }
            },
            error: function () {
                alert("出现错误");
            }
        })

        function AppendNodes(value, text) {
            $("#roleIds").append("<option  value='" + value + "'  name='ss' id='ss'>" + text + "</option>");
        }

        $("select[id=roleId]").blur(function () {
            $("#roleIds").find("option").remove();
            var myselect = document.getElementById("roleId");
            var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselect.options[index].value;
            let rr = myselect.options[index].text;
            $.ajax({
                "url": "spcx?opr=spleix&rr=" + rr,
                "type": 'post',
                "data": {},
                async: false,   //如果不加，无法实现数据传值
                "dataType": 'json',
                "success": function (datajson) {
                    var select = $("#cRoleName");
                    if (datajson == null || datajson == "") {
                        $("#roleIds").append("<option name='ss' id='ss'>无</option>");
                    } else {
                        $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                            var roleNames = datajson[key].etype;
                            //调用自定义方法
                            AppendNodes(roleNames, roleNames);//将value和text添加到下拉框中
                        });
                    }
                },
                error: function () {
                    alert("出现错误");
                }
            })

            function AppendNodes(value, text) {
                $("#roleIds").append("<option  value='" + value + "'  name='ss' id='ss'>" + text + "</option>");
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let a = document.getElementById("demo1").src;
            if (a == "" || a == null) {
                $("#photo").val("初始化.png");
            }
            var myselect = document.getElementById("roleId");
            var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselect.options[index].value;
            let rr = myselect.options[index].text;

            var myselects = document.getElementById("roleIds");
            var indexs = myselects.selectedIndex;             // selectedIndex代表的是你所选中项的index
            myselects.options[indexs].value;
            let rrs = myselects.options[indexs].text;
            var p_name = $("#yhm").val();
            if (rrs == "无" || rrs == '无') {
                $(".tishi").text("请新增父级或选择有父级的类型进行添加").show(200);
                $(".tishi").delay(2500).hide(200);
            } else if (rrs == p_name || rr == p_name) {
                $(".tishi1").text("商品名称与父级冲突").show(200);
                $(".tishi1").delay(2500).hide(200);
            } else {
                    let post_data = $("form").serialize();
                    $.ajax({
                        "url": "spcx?opr=addSave&rr='" + rr + "'&ss='" + rrs + "'",
                        "dataType": 'text',
                        "type": 'post',
                        "data": post_data,
                        async: false,
                        "success": function (date) {
                            if (date == "true") {
                                layer.msg('新增成功', {icon: 1, time: 1500}, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    let b=sessionStorage.obs;
                                    let a=b.replace(/\"/g, "");
                                    let cz="商品查询";
                                    let gn="商品新增";
                                    let jg="成功";
                                    $.ajax({
                                        "url": "gly?opr=xmr",
                                        "data": {name:a,cz:cz,gn:gn,jg:jg}
                                    })
                                    top.window['butt'].frames.location.reload();
                                    top.window['lode'].frames.location.reload();
                                });
                            } else {
                                layer.msg('新增失败', {icon: 2, time: 1500});
                                let b=sessionStorage.obs;
                                let a=b.replace(/\"/g, "");
                                let cz="商品查询";
                                let gn="商品新增";
                                let jg="失败";
                                $.ajax({
                                    "url": "gly?opr=xmr",
                                    "data": {name:a,cz:cz,gn:gn,jg:jg}
                                })
                            }
                        }
                    });
            }
            return false;
        });
        //上传文件
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'member?opr=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 给隐藏表单赋值
                $("#photo").val(res.imgSrc);
                $('#demoText').html('');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //多图文件上传
        var uploadInst2 = upload.render({
            elem: '#upload_2'
            , url: "gly?opr=upload" //多图上传接口
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_listss').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 100px;height: 100px;" onclick="showimg(this)">')
                    $('#control_img_del').css('display', 'inline');
                    $('#control_img').css('display', 'inline');
                });
            }
            , done: function (data) {
                //上传失败
                if (data.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    //上传成功
                    var last_url = document.getElementById("picText_2").value;
                    var upload_url = "";
                    if (last_url !== "") {
                        upload_url = last_url + "," + "static/img/手机展示/" + data.imgSrc;
                    } else {
                        upload_url = "static/img/手机展示/" + data.imgSrc;
                    }
                    document.getElementById("picText_2").value = upload_url;
                    //将后台获取的图片地址传到前台存入隐藏控件中，随着表单一起提交
                    document.getElementById("H_img").value = upload_url;
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText2 = $('#demoText2');
                demoText2.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText2.find('.demo-reload').on('click', function () {
                    uploadInst2.upload();
                });
            }
        });
        //删除多张图片
        $('#control_img_del').click(function () {
            $("#upload_listss").find("img").remove();
            document.getElementById("picText_2").value = "";
            $('img[class=layui-upload-img]').css('display', 'none');
            $('#control_img_del').css('display', 'none');
            $('#control_img').val('');
            document.getElementById("H_img").value = "";
        })

        //多图文件上传
        var uploadInst2 = upload.render({
            elem: '#upload_1'
            , url: "gly?opr=upload" //多图上传接口
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_lists').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 100px;height: 100px;" onclick="showimg(this)">')
                    $('#control_img_dels').css('display', 'inline');
                    $('#control_imgs').css('display', 'inline');
                });
            }
            , done: function (data) {
                //上传失败
                if (data.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    //上传成功
                    var last_url = document.getElementById("picText_1").value;
                    var upload_url = "";
                    if (last_url !== "") {
                        upload_url = last_url + "," + "static/img/手机展示/" + data.imgSrc;
                    } else {
                        upload_url = "static/img/手机展示/" + data.imgSrc;
                    }
                    document.getElementById("picText_1").value = upload_url;
                    //将后台获取的图片地址传到前台存入隐藏控件中，随着表单一起提交
                    document.getElementById("H_img").value = upload_url;
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText2 = $('#demoText1');
                demoText2.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText2.find('.demo-reload').on('click', function () {
                    uploadInst2.upload();
                });
            }
        });
        //删除多张图片
        $('#control_img_dels').click(function () {
            $("#upload_lists").find("img").remove();
            document.getElementById("picText_1").value = "";
            $('img[class=layui-upload-img]').css('display', 'none');
            $('#control_img_dels').css('display', 'none');
            $('#control_imgs').val('');
            document.getElementById("H_img").value = "";
        })

    })

    function showimg(t) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
        });
    }
</script>
</body>
</html>